import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import TableRender from '@/render/TableRender'
import logoIcon from '@/assets/channel-management/detail/logo-icon.png'
import { Tabs, TabPane, Dropdown, Menu, MenuItem, Button, Tag } from 'ant-design-vue'
import BasicInfoView from './components/BasicInfo'
import PremiumRecordsView from './components/PremiumRecords'
import { CaretDownOutlined } from '@ant-design/icons-vue'
import SetTimePop from './components/SetTimePop'
import EditSchemePop from './components/EditSchemePop'
import AddInsurancePricePop from './components/AddInsurancePricePop'
import { insureEnsurePlanDetail } from '@/api/insureEnsurePlan'
import type { InsureEnsurePlanListDto } from '@/api/insureEnsurePlan/types'
import { InsureEnsureStatusCnEnum, InsurePlanTypeCnEnum, OccupationLevelCnEnum } from '@/const/enum'
import useUserStore from '@/stores/user'
import dayjs from 'dayjs'
import RuleInfo from './components/RuleInfo'

@Component
export class AboutView extends TableRender {
    id = null as null | number

    detailData = {} as InsureEnsurePlanListDto

    isSetTimePop = false
    isEditSchemePop = false
    isAddInsurancePricePop = false

    colorMap = {
        0: 'processing',
        1: 'success',
        2: 'error'
    }

    async initData() {
        const res = await insureEnsurePlanDetail({
            id: this.id as number
        })
        res.planStartTime = res.planStartTime ? dayjs(res.planStartTime).format('YYYY-MM-DD') : ''
        res.planEndTime = res.planEndTime ? dayjs(res.planEndTime).format('YYYY-MM-DD') : '长期有效'

        this.detailData = res

    }

    mounted() {
        this.id = this.$route.params?.id ? Number(this.$route.params?.id) : null
        this.id && this.initData()
    }

    renderHead() {
        return (
            <div class=" rounded-default bg-white-default">
                <div class="pb-20 flex justify-between">
                    <div class="flex items-center">
                        <img src={logoIcon} class="w-60 h-60 mr-16" alt="" />
                        <div class="flex items-start">
                            <div>
                                <div class="text-black-light-200 text-lg mr-16">
                                    {this.detailData.insureCompanyPlanName}
                                </div>
                                {/* <div class="mt-4 text-black-300">CQ26123145</div> */}
                            </div>
                            <Tag color={this.colorMap[this.detailData.status]}>{InsureEnsureStatusCnEnum[this.detailData.status]}</Tag>
                        </div>
                    </div>
                    <div class="flex items-center">
                        <Dropdown
                            overlay={
                                <Menu>
                                    {useUserStore().hasPermission('client:insureEnsure:edit') && <MenuItem
                                        onClick={() => {
                                            this.isEditSchemePop = true
                                        }}
                                    >
                                        编辑
                                    </MenuItem>
                                    }
                                    {
                                        useUserStore().hasPermission('client:insureEnsure:addPrice') &&
                                    <MenuItem
                                        onClick={() => {
                                            this.isAddInsurancePricePop = true
                                        }}
                                    >
                                        新增价格
                                    </MenuItem>
                                    }

                                    <MenuItem
                                        onClick={() => {
                                            this.isSetTimePop = true
                                        }}
                                    >
                                        时间设置
                                    </MenuItem>
                                </Menu>
                            }
                        >
                            <div class="px-12 py-4 border-solid border-gray-light-300 border rounded-sm flex items-center mr-12">
                                <div class="text-base">更多设置</div>
                                <CaretDownOutlined />
                            </div>
                        </Dropdown>
                        <Button type="primary">返回</Button>
                    </div>
                </div>
                <div class="w-full border-1  border-gray-light-400"></div>
                <div class="mt-20 flex justify-between">
                    <div>
                        <div class="text-gray-light-600 text-base">风险等级</div>
                        <div class="mt-12 text-black-light-100 font-medium">
                            {this.detailData.dangerLevel?.map((item, index) => {
                                return OccupationLevelCnEnum[item]
                                    
                            })?.join(',')}
                        </div>
                    </div>
                    <div>
                        <div class="text-gray-light-600 text-base">方案类型</div>
                        <div class="mt-12 text-black-light-100 font-medium">
                            {InsurePlanTypeCnEnum[this.detailData.insurePlanType]}
                        </div>
                    </div>
                    <div>
                        <div class="text-gray-light-600 text-base">保司名称</div>
                        <div class="mt-12 text-black-light-100 font-medium">
                            {this.detailData.name}
                        </div>
                    </div>
                    {/* <div>
                        <div class="text-gray-light-600 text-base">理赔率</div>
                        <div class="mt-12 text-black-light-100 font-medium">
                            
                        </div>
                    </div> */}
                    <div>
                        <div class="text-gray-light-600 text-base">有效时间</div>
                        <div class="mt-12 text-black-light-100 font-medium">
                            {this.detailData.planStartTime} ~ {this.detailData.planEndTime}
                        </div>
                    </div>
                </div>
            </div>
        )
    }
    renderTabs() {
        return (
            <Tabs>
                <TabPane key="1" tab="基础信息">
                    <BasicInfoView detailData={this.detailData} />
                </TabPane>
                <TabPane key="2" tab="保费记录">
                    <PremiumRecordsView detailData={this.detailData} />
                </TabPane>
                <TabPane key="3" tab="规则信息">
                    <RuleInfo detailData={this.detailData} />
                </TabPane>
            </Tabs>
        )
    }
    render() {
        return (
            <div class="flex flex-col h-full px-24 py-20">
                <div class="flex-none">{this.renderHead()}</div>
                <div class="flex-1 mt-20">{this.renderTabs()}</div>
                <SetTimePop v-model:show={this.isSetTimePop} detailData={this.detailData} onRefresh={this.initData}/>
                <EditSchemePop v-model:show={this.isEditSchemePop} detailData={this.detailData} onRefresh={this.initData}/>
                <AddInsurancePricePop v-model:show={this.isAddInsurancePricePop} detailData={this.detailData} onRefresh={this.initData}/>
            </div>
        )
    }
}

export default toNative<{}, {}>(AboutView)
